<template>
  <el-card shadow="never" class="index">
    <template #header>
      <div class="card_header">
        <SearchForm
          :formInputs="[
            { label: '名称', type: 'input', name: 'name' },
            {
              label: '等级',
              type: 'select',
              name: 'level',
              defaultValue: -1,
              options: [
                { label: '不限', value: -1 },
                { label: '一级', value: 1 },
                { label: '二级', value: 2 },
                { label: '三级', value: 3 },
              ],
            },
          ]"
          @submit="search"
        />
      </div>
    </template>
    <div class="table">
      <p :style="{ textAlign: 'right', marginBottom: '20px' }">
        <i class="el-icon-edit" @click="action('add')">添加</i>
      </p>
      <el-table :data="state.tableData" stripe border>
        <el-table-column prop="id" label="主键" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="level" label="等级">
          <template #default="scope">
            {{ ["一级", "二级", "三级"][scope.row.level - 1] }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template #default="scope">
            <el-space :size="10" spacer="|">
              <i class="el-icon-delete" @click="action('remove', scope.row)"
                >删除</i
              >
              <i class="el-icon-edit-outline" @click="action('edit', scope.row)"
                >编辑</i
              >
            </el-space>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="state.total"
      @current-change="handleCurrentChange"
      :style="{ marginTop: '40px' }"
      align="right"
    />
    <FormModal
      :formConfig="{
        title: '医院信息提交',
        items: [
          {
            label: '名称',
            type: 'input',
            name: 'name',
            rules: [
              {
                required: true,
                message: '请输入医院名称',
                trigger: 'blur',
              },
              {
                min: 5,
                max: 35,
                message: '长度必须在5-35',
                trigger: 'change',
              },
            ],
          },
          {
            label: '等级',
            type: 'select',
            name: 'level',
            rules: [
              {
                required: true,
                message: '请选择医院等级',
                trigger: 'change',
              },
            ],
            options: [
              { label: '一级', value: 1 },
              { label: '二级', value: 2 },
              { label: '三级', value: 3 },
            ],
          },
        ],
      }"
      @submit="submit"
      ref="dialogRef"
    />
  </el-card>
</template>

<script setup>
import { onBeforeMount, getCurrentInstance, reactive, ref } from "vue";
import FormModal from "@/components/FormModal.vue";
import SearchForm from "@/components/SearchForm.vue";

const { proxy } = getCurrentInstance();
const state = reactive({
  tableData: [],
  total: 0,
});
const dialogRef = ref();

const getList = (page, size) => {
  proxy.$axios
    .get("/hospital/list", {
      params: { page, size },
    })
    .then(({ success, data }) => {
      if (success) {
        state.tableData = data.list;
        state.total = data.total;
      }
    });
};

const handleCurrentChange = (val) => {
  getList(val, 10);
};

const search = (value) => {
  console.log(value);
};

const submit = (value) => {
  console.log(value);
};

const action = (type, record) => {
  if (type === "add") {
    dialogRef.value.handleOpenForm({});
  } else if (type === "edit") {
    dialogRef.value.handleOpenForm(record);
  }
};

//生命周期钩子函数
onBeforeMount(() => {
  getList(1, 10);
});
</script>

<style lang="less" scoped>
.card_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:deep(i) {
  color: #0d84ff;
  cursor: pointer;

  &:hover {
    color: #66b1ff;
  }
}
</style>
